<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <t-detail
          v-if="dataList.length != 0"
          :list="dataList"
          :is-title="true"
          :title="'基本信息'"
          :is-card-border="true"
        >
          <template
            v-if="item.value != ''"
            slot="deviceStatus"
            slot-scope="{ item }"
          >
            <el-tag
              size="small"
              :style="item.value | constantKeyTagStyleObj('WARNING_TYPE')"
            >
              {{ item.value | constantKeyValue('WARNING_TYPE') }}
            </el-tag>
          </template>
          <template slot="solveStatus" slot-scope="{ item }">
            <el-tag
              size="small"
              :style="item.value | constantKeyTagStyleObj('HANDLE_STATUS')"
            >
              {{ item.value | constantKeyValue('HANDLE_STATUS') }}
            </el-tag>
          </template>
          <template slot="jobStatus" slot-scope="{ item }">
            <!-- {{ item.value }} -->
            <el-tag
              size="small"
              :style="item.value | constantKeyTagStyleObj('ORDER_STATUS')"
            >
              {{ item.value | constantKeyValue('ORDER_STATUS') }}
            </el-tag>
          </template>
          <template
            v-if="item.value != ''"
            slot="auditTime"
            slot-scope="{ item }"
          >
            {{ item.value | datefmt('YYYY-MM-DD HH:mm:ss') }}
          </template>
          <template
            v-if="item.value != ''"
            slot="alertTime"
            slot-scope="{ item }"
          >
            {{ item.value | datefmt('YYYY-MM-DD HH:mm:ss') }}
          </template>
          <template
            v-if="item.value != ''"
            slot="confirmTime"
            slot-scope="{ item }"
          >
            {{ item.value | datefmt('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </t-detail>

        <t-detail
          v-if="alarmEliminationPersonInfo.length != 0"
          :list="alarmEliminationPersonInfo"
          :is-title="true"
          :title="'消警人员信息'"
          :is-card-border="true"
        />
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false"
        >
          关闭
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import TDetail from '@/components/TDetail'
import dataDetailMixins from '@/mixins/data-detail-mixins'
export default {
  components: {
    TDetail,
  },
  mixins: [dataDetailMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      dataList: this.getDetailList(),
      alarmEliminationPersonInfo: this.getAlarmEliminationPersonInfo(),
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  methods: {
    getDetailList() {
      console.log(this.params)
      const list = [
        [
          {
            text: '设备区分',
            value:
              this.params.deviceIsLine == 0
                ? '传统有线'
                : '智能无线' || '-',
          },
        ],
        [{ text: '设备类型', value: this.params.deviceTypeStr || '-' }],

        [{ text: '设备名称', value: this.params.deviceName || '-' }],
        [{ text: '设备编码', value: this.params.deviceSource || '-' }],
        [
          {
            text: '告警时间',
            value: this.params.alertTime,
            slotName: 'alertTime',
          },
        ],

        [{ text: '告警地点', value: this.params.deviceAddress || '-' }],
        [{ text: '告警原因', value: this.params.alarmCause || '-' }],
        [
          {
            text: '告警类型',
            value: this.params.deviceStatus,
            slotName: 'deviceStatus',
          },
        ],
        [
          {
            text: '告警状态',
            value: this.params.solveStatus,
            slotName: 'solveStatus',
          },
        ],

        [
          {
            text: '确认时间',
            value: this.params.confirmTime,
            slotName: 'confirmTime',
          },
        ],

        [{ text: '确认人', value: this.params.confirmUser || '-' }],
        [{ text: '确认状态', value: this.params.confirmRemark || '-' }],
        [
          {
            text: '工单状态',
            value: this.params.jobStatus,
            slotName: 'jobStatus',
          },
        ],
        // [
        //   {
        //     text: '审核时间',
        //     value: this.params.auditTime,
        //     slotName: 'auditTime'
        //   }
        // ]
      ]
      return list
    },
    getAlarmEliminationPersonInfo() {
      const list = [
        [{ text: '消警人员', value: this.params.eliminateUser || '-' }],
        [{ text: '消警原因', value: this.params.eliminateReason || '-' }],
      ]
      return list
    },
    toClose() {
      this.$emit('close')
    },
  },
}
</script>


<style lang="scss" scoped>
@import '../../../../../styles/part-custom';
</style>
